<extend name="./Application/Admin/View/Public/base.html" />
<block name="eosi-css">
    <link href="__PUBLIC__/assets/css/daterangepicker.css" rel="stylesheet">
</block>
<block name="eosi-js"> <script
    src="__PUBLIC__/assets/js/date-time/bootstrap-datepicker.min.js"></script>
    <script src="__PUBLIC__/assets/js/jqGrid/jquery.jqGrid.min.js"></script>
    <script src="__PUBLIC__/assets/js/jqGrid/i18n/grid.locale-en.js"></script>
    <script type="text/javascript">
        var $path_base = "/";//this will be used in gritter alerts containing images
    </script>
</block>
<block name="page-content">
    <div class="row">
        <div class="col-xs-12">
            <div class="row-fluid">
                <div class="span12">
                    <div class="widget-box">
                        <div class="widget-header header-color-blue">
                            <h5 class="lighter">
                                访问授权
                            </h5>
                        </div>
                        <div class="widget-body">
                            <div class="widget-main no-padding">
                                <form class="form-horizontal"  name="saveForm" id="saveForm"  method="post"  action="{:U('rulePermitSave')}">
                                    <table class="table table-striped table-bordered table-hover">
                                        <tbody>
                                            <tr>
                                                <td class="no-padding-right" width="15%">
                                                    <label class="control-label"><small>用户组中文名称</small></label>
                                                </td>
                                                <td>
                                                    <input type="hidden" id="groupid" name="groupid" value="{$groupid}" class="col-xs-10 col-sm-4" />
                                                    <label>{$grouptitle}
                                                        <small class=red>&nbsp;(注意：选中或取消选中会同步保存到数据库中)</small>
                                                    </label>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="no-padding-right" width="15%">
                                                    <label class="control-label"><small>所属规则</small></label>
                                                </td>
                                                <td>
                                                    <table class="table table-striped table-bordered table-hover">

                                                        <table id="grid-table"></table>
                                                        <div id="grid-pager"></div>
                                                    </table>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>

                                    <table class="table table-striped table-bordered table-hover" id="answer">
                                        <tbody>
                                            <tr>
                                                <td class="no-padding-right" width="15%">

                                                </td>
                                                <td>
                                                    <button class="btn btn-warning" type="button" onclick="returnButton({});">
                                                        <i class="icon-undo bigger-110"></i>
                                                        返回
                                                    </button>
                                                </td>
                                            </tr>

                                        </tbody>
                                    </table>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- /.row -->
</div><!-- /.page-content -->
</div><!-- /.main-content -->

<include file="Public/foot"/>

<script type="text/javascript">
var groupid = '{$groupid}';
var grid_data = {$rules};
jQuery( function ($){
	var grid_selector = "#grid-table";
	var pager_selector = "#grid-pager";
	var mygrid = jQuery(grid_selector).jqGrid({
		//direction: "rtl",
		data: grid_data,
		datatype: "local",
		height: 315,
		colNames:[ '规则英文标识', '规则中文描述'],
		colModel:[
			{name:'name',index:'name',width:90},
			{name:'title',index:'title', width:150} 
		], 	
		viewrecords : true,
		rowNum:10,
		rowList:[10,15,30],
		pager : pager_selector,
		altRows: true,
		sortname: 'id',
		sortorder: 'desc',
		//toppager: true,	
		multiselect: true,
		//multikey: "ctrlKey",
        multiboxonly: false,
        onSelectAll : function(rowid,status) {
        	//记录规则
        	recordAllRules(rowid,status);
		},
        onSelectRow: function(rowid,status) {
        	//记录规则
			recordRules(rowid,status);
		},
		loadComplete : function() {
			var table = this;
			setTimeout(function(){
				styleCheckbox(table);
				
				updateActionIcons(table);
				updatePagerIcons(table);
				enableTooltips(table);
				
				//默认选中部分行
				setSelected();
			}, 0);
		},
		autowidth: true
	});
	//默认选中 已选择的规则ID
	function setSelected(){
		var selectRules = '{$selectRules}';
		if (selectRules != '') {
			selectRulesArr = selectRules.split(",");
			for(i=0;i<selectRulesArr.length;i++){
				var ruleid = selectRulesArr[i];
				$(grid_selector).jqGrid('setSelection',ruleid);//默认选中
			}
		}
	}
	//记录规则ID 或者 去除规则ID 
	function recordRules(ruleid, status){
		$.ajax({
			type: "POST",
			url:"__CONTROLLER__/rulePermitSave",
			dataType: 'json',
			async: false,
			data: {groupid:groupid,ruleid:ruleid,status:status},
			success: function(data){
				if (data.status == 0) {
					art.dialog.alert(data.info);
				}
			},
			error:function(){
				art.dialog.alert("操作失败");
			}
		});
	}
	//记录全部规则ID 或者 去除规则ID 
	function recordAllRules(rowidstr, status){
		rowidstr = "" + rowidstr + "";
    	rowidArr = rowidstr.split(",");
    	ruleid = rowidArr.join("#");	
    	$.ajax({
			type: "POST",
			url:"__CONTROLLER__/rulePermitSave",
			dataType: 'json',
			async: false,
			data: {groupid:groupid,ruleid:ruleid,status:status},
			success: function(data){
				if (data.status == 0) {
					art.dialog.alert(data.info);
				}
			},
			error:function(){
				art.dialog.alert("操作失败");
			}
		});
	}
	//switch element when editing inline
	function aceSwitch( cellvalue, options, cell ) {
		setTimeout(function(){
			$(cell) .find('input[type=checkbox]')
					.wrap('<label class="inline" />')
				.addClass('ace ace-switch ace-switch-5')
				.after('<span class="lbl"></span>');
		}, 0);
	}
	//enable datepicker
	function pickDate( cellvalue, options, cell ) {
		setTimeout(function(){
			$(cell) .find('input[type=text]')
					.datepicker({format:'yyyy-mm-dd' , autoclose:true}); 
		}, 0);
	}
	//navButtons
	jQuery(grid_selector).jqGrid('navGrid',pager_selector,
		{ 	//navbar options
			edit: false,
			editicon : 'icon-pencil blue',
			add: false,
			addicon : 'icon-plus-sign purple',
			view: false,
			viewicon : 'icon-zoom-in grey',
			del: false,
			delicon : 'icon-trash red',
			search: false,
			searchicon : 'icon-search orange',
			refresh: false,
			refreshicon : 'icon-refresh green',
			
		},
		{
			//edit record form
			//closeAfterEdit: true,
			recreateForm: true,
			beforeShowForm : function(e) {
				var form = $(e[0]);
				form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
				style_edit_form(form);
			}
		},
		{
			//new record form
			closeAfterAdd: true,
			recreateForm: true,
			viewPagerButtons: false,
			beforeShowForm : function(e) {
				var form = $(e[0]);
				form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
				style_edit_form(form);
			}
		},
		{
			//delete record form
			recreateForm: true,
			beforeShowForm : function(e) {
				var form = $(e[0]);
				if(form.data('styled')) return false;
				
				form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
				style_delete_form(form);
				
				form.data('styled', true);
			},
			
			onClick : function(e) {
				alert(1);
			}
		},
		{
			//search form
			recreateForm: true,
			afterShowSearch: function(e){
				var form = $(e[0]);
				form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
				style_search_form(form);
			},
			afterRedraw: function(){
				style_search_filters($(this));
			}
			,
			multipleSearch: true,
			/**
			multipleGroup:true,
			showQuery: true
			*/
		},
		{
			//view record form
			recreateForm: true,
			beforeShowForm: function(e){
				var form = $(e[0]);
				form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
			}
		}
	)
	function style_edit_form(form) {
		//enable datepicker on "sdate" field and switches for "stock" field
		form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})
			.end().find('input[name=stock]')
				  .addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');

		//update buttons classes
		var buttons = form.next().find('.EditButton .fm-button');
		buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
		buttons.eq(0).addClass('btn-primary').prepend('<i class="icon-ok"></i>');
		buttons.eq(1).prepend('<i class="icon-remove"></i>')
		
		buttons = form.next().find('.navButton a');
		buttons.find('.ui-icon').remove();
		buttons.eq(0).append('<i class="icon-chevron-left"></i>');
		buttons.eq(1).append('<i class="icon-chevron-right"></i>');		
	}

	function style_delete_form(form) {
		var buttons = form.next().find('.EditButton .fm-button');
		buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
		buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>');
		buttons.eq(1).prepend('<i class="icon-remove"></i>')
	}
	
	function style_search_filters(form) {
		form.find('.delete-rule').val('X');
		form.find('.add-rule').addClass('btn btn-xs btn-primary');
		form.find('.add-group').addClass('btn btn-xs btn-success');
		form.find('.delete-group').addClass('btn btn-xs btn-danger');
	}
	function style_search_form(form) {
		var dialog = form.closest('.ui-jqdialog');
		var buttons = dialog.find('.EditTable')
		buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'icon-retweet');
		buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'icon-comment-alt');
		buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'icon-search');
	}
	
	function beforeDeleteCallback(e) {
		var form = $(e[0]);
		if(form.data('styled')) return false;
		
		form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
		style_delete_form(form);
		
		form.data('styled', true);
	}
	
	function beforeEditCallback(e) {
		var form = $(e[0]);
		form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
		style_edit_form(form);
	}

	//it causes some flicker when reloading or navigating grid
	//it may be possible to have some custom formatter to do this as the grid is being created to prevent this
	//or go back to default browser checkbox styles for the grid
	function styleCheckbox(table) {
	/**
		$(table).find('input:checkbox').addClass('ace')
		.wrap('<label />')
		.after('<span class="lbl align-top" />')


		$('.ui-jqgrid-labels th[id*="_cb"]:first-child')
		.find('input.cbox[type=checkbox]').addClass('ace')
		.wrap('<label />').after('<span class="lbl align-top" />');
	*/
	}
	
	//unlike navButtons icons, action icons in rows seem to be hard-coded
	//you can change them like this in here if you want
	function updateActionIcons(table) {
		
		var replacement = 
		{
			'ui-icon-pencil' : 'icon-pencil blue',
			'ui-icon-trash' : 'icon-trash red',
			'ui-icon-disk' : 'icon-ok green',
			'ui-icon-cancel' : 'icon-remove red'
		};
		$(table).find('.ui-pg-div span.ui-icon').each(function(){
			var icon = $(this);
			var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
			if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
		})		
	}
	
	//replace icons with FontAwesome icons like above
	function updatePagerIcons(table) {
		var replacement = 
		{
			'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
			'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
			'ui-icon-seek-next' : 'icon-angle-right bigger-140',
			'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
		};
		$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
			var icon = $(this);
			var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
			
			if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
		})
	}

	function enableTooltips(table) {
		$('.navtable .ui-pg-button').tooltip({container:'body'});
		$(table).find('.ui-pg-div').tooltip({container:'body'});
	}

	//var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');
	
	returnButton = function (){
		location.href = "__CONTROLLER__/group";
	}	
});
</script>
</block>